<template>
  <div class="rank">
    <div v-if="rankList.length>0">
        <div class="content">
            <div>
                <RankPart
                    v-for="rank in rankList"
                    :key="rank.album.id"
                    :rank="rank"
                ></RankPart>
            </div>
        </div>
        <slot></slot>
    </div>
    <ThumbnailLoading v-else></ThumbnailLoading>
    <PageHeader>排行榜</PageHeader>
  </div>
</template>

<script>
import RankPart from "components/rank/RankPart"
import ThumbnailLoading from "components/public/ThumbnailLoading"
import PageHeader from "components/public/PageHeader"
import BScroll from "better-scroll"
import { get } from "util/http"
export default {
    data(){
        return{
            rankList:[]
        }
    },
    components:{
        RankPart,
        ThumbnailLoading,
        PageHeader

    },
    async mounted(){
        let result=await get({
            url:"/ajax/mobileWeb/albumList"
        })
        this.rankList=result.info
        await this.$nextTick()
        new BScroll('.rank')
    }
}
</script>

<style lang="stylus" scoped>
.rank
    width 100%
    height calc(100vh - 0.4rem)
    display flex
    flex-direction column

    .content
        padding-top .4rem
        width 100%
</style>